<!--
 * @Author: 835036768@qq.com 835036768@qq.com
 * @Date: 2024-04-17 21:08:16
 * @LastEditors: chululu 835036768@qq.com
 * @LastEditTime: 2025-09-01 23:24:23
 * @FilePath: \electronic-seal\src\views\HomeView.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup lang="ts">
import router from '@/router'
import { ref } from 'vue'
const topList = ref([
  { id: 1, image: '/images/katong/tiaosheng.jpg', name: 'AI 跳绳', path: '/katong/tiaosheng' },
  { id: 2, image: '/images/katong/fruit.jpeg', name: '水果忍者', path: '/katong/fruit' },
  { id: 3, image: '/images/katong/wawa.jpg', name: '娃娃机', path: '/katong/wawa' },
  { id: 4, image: '/images/katong/pengpengqiu.jpg', name: '碰碰球', path: '/katong/pengpengqiu' }
])
const bottomList = ref([
  { id: 1, image: '/images/tec/tiaosheng.jpg', name: 'AI 跳绳', path: '/tec/tiaosheng' },
  { id: 2, image: '/images/tec/fruit.jpeg', name: '水果忍者', path: '/tec/fruit' },
  { id: 3, image: '/images/tec/wawa.jpg', name: '娃娃机', path: '/tec/wawa' },
  { id: 4, image: '/images/tec/pengpengqiu.jpg', name: '碰碰球', path: '/tec/pengpengqiu' }
])

const handClick = (path: string) => {
  router.push(path)
}
</script>

<template>
  <div class=" w-screen flex flex-col">
    <div id="top" class="top flex-1 flex flex-wrap p-4 gap-4 items-start">
      <div
        class="w-48 bg-white rounded-lg overflow-hidden shadow-md transition-transform duration-300 hover:scale-105 hover:shadow-lg"
        v-for="item in topList"
        :key="item.id"
        @click="handClick(item.path)"
      >
        <div class="h-36 bg-blue-200 flex items-center justify-center">
          <img :src="item.image" class="w-full h-full object-cover" />
        </div>
        <div class="p-3 text-center">
          <h3 class="font-medium text-gray-800">a{{ item.name }}</h3>
        </div>
      </div>
    </div>
    <div id="bottom" class="flex-1 flex flex-wrap p-4 gap-4 items-start">
      <div
        class="w-48 bg-white rounded-lg overflow-hidden shadow-md transition-transform duration-300 hover:scale-105 hover:shadow-lg"
        v-for="item in bottomList"
        :key="item.id"
        @click="handClick(item.path)"
      >
        <div class="h-36 bg-blue-200 flex items-center justify-center">
          <img :src="item.image" class="w-full h-full object-cover" />
        </div>
        <div class="p-3 text-center">
          <h3 class="font-medium text-gray-800">b{{ item.name }}</h3>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.top {
  border-bottom: 2px solid black;
}
</style>
